<!DOCTYPE html>

<html lang="en" xmlns:th="https://www.thymeleaf.org/">
<head>
    <meta charset="utf-8">
    <title>Edu Science</title>

    <meta http-equiv="X-UA-7Compatible" content="IE=edge">
    <meta name="description" content="Construction Html5 Template">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">

    <!-- theme meta -->
    <meta name="theme-name" content="educenter" />

    <!-- ** Plugins Needed for the Project ** -->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="/static/plugins/bootstrap/bootstrap.min.css">
    <!--
      Slick是一个响应式的、触摸友好的jQuery滑块插件，常用于创建轮播图、图片展示等
    -->
    <link rel="stylesheet" href="/static/plugins/slick/slick.css">
    <!--
      引入了Themify Icons的样式表。Themify Icons是一个包含大量矢量图标的图标库，可用于网页设计和开发
     -->
    <link rel="stylesheet" href="/static/plugins/themify-icons/themify-icons.css">
    <!--
      引入了Animation CSS的样式表。这个库提供了一系列的CSS动画类，可以很容易地添加到HTML元素中，实现各种动画效果
     -->
    <link rel="stylesheet" href="/static/plugins/animate/animate.css">
    <!--
      引入了AOS（Animate on Scroll）的样式表。AOS是一个JavaScript库，它可以在元素滚动到视口时触发动画效果
     -->
    <link rel="stylesheet" href="/static/plugins/aos/aos.css">
    <!--
      引入了Venobox Popup的的样式表。Venobox是一个用于创建模态框（modal boxes）或弹出窗口（popups）的JavaScript插件，常用于图片展示、视频播放或表单提交等场景
     -->
    <link rel="stylesheet" href="/static/plugins/venobox/venobox.css">

    <!-- Main Stylesheet -->
    <link href="/static/css/style.css" rel="stylesheet">

    <!--Favicon-->
    <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">
    <link rel="icon" href="/static/images/favicon.ico" type="image/x-icon">

</head>

<body>

<!-- header -->
<header class="fixed-top header">
    <!-- top header -->
    <div class="top-header py-2 bg-white">
        <div class="container">
            <div class="row no-gutters">
                <div class="col-lg-4 text-center text-lg-left">

                    <ul class="list-inline d-inline">
                        <li class="list-inline-item mx-0"><a class="d-inline-block p-3 text-color" href="#"><i class="ti-github"></i></a></li>
                        <li class="list-inline-item mx-0"><a class="d-inline-block p-3 text-color" href="#"><i class="ti-layout-placeholder"></i></a></li>
                        <li class="list-inline-item mx-0"><a class="d-inline-block p-3 text-color" href="#"><i class="ti-linux"></i></a></li>
                    </ul>
                </div>
                <div class="col-lg-8 text-center text-lg-right">
                    <ul class="list-inline">
                        <li class="list-inline-item"><a class="text-uppercase text-color p-sm-3 py-2 px-0 d-inline-block" href="notice.html">通知</a></li>
                        <li class="list-inline-item"><a class="text-uppercase text-color p-sm-3 py-2 px-0 d-inline-block" href="#loginModal" data-toggle="modal" data-target="#loginModal">登录</a></li>
                        <li class="list-inline-item"><a class="text-uppercase text-color p-sm-3 py-2 px-0 d-inline-block" href="#signupModal" data-toggle="modal" data-target="#signupModal">注册</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- navbar -->
    <div class="navigation w-100">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-dark p-0">
                <a class="navbar-brand" href="index.html"><img src="/static/images/logo.png" alt="logo"></a>
                <button class="navbar-toggler rounded-0" type="button" data-toggle="collapse" data-target="#navigation"
                        aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navigation">
                    <ul class="navbar-nav ml-auto text-center">
                        <li class="nav-item @@index">
                            <a class="nav-link" href="/static/index.html">主页</a>
                        </li>
                        <li class="nav-item @@courses">
                            <a class="nav-link" href="/static/courses.html">课程</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="/static/events.html">活动</a>
                        </li>
                        <li class="nav-item @@blog">
                            <a class="nav-link" href="/static/blog.html">资料</a>
                        </li>
                        <li class="nav-item @@teacher">
                            <a class="nav-link" href="/static/teacher.html">老师</a>
                        </li>
                        <li class="nav-item @@about">
                            <a class="nav-link" href="/static/about.html">关于</a>
                        </li>
                        <li class="nav-item @@contact">
                            <a class="nav-link" href="/static/contact.html">联系</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</header>
<!-- /header -->
<!-- Modal -->
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content rounded-0 border-0 p-4">
            <div class="modal-header border-0">
                <h3>Register</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="login">
                    <form action="#" class="row">
                        <div class="col-12">
                            <input type="text" class="form-control mb-3" id="signupPhone" name="signupPhone" placeholder="Phone">
                        </div>
                        <div class="col-12">
                            <input type="text" class="form-control mb-3" id="signupName" name="signupName" placeholder="Name">
                        </div>
                        <div class="col-12">
                            <input type="email" class="form-control mb-3" id="signupEmail" name="signupEmail" placeholder="Email">
                        </div>
                        <div class="col-12">
                            <input type="password" class="form-control mb-3" id="signupPassword" name="signupPassword" placeholder="Password">
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary">SIGN UP</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content rounded-0 border-0 p-4">
            <div class="modal-header border-0">
                <h3>Login</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="#" class="row">
                    <div class="col-12">
                        <input type="text" class="form-control mb-3" id="loginPhone" name="loginPhone" placeholder="Phone">
                    </div>
                    <div class="col-12">
                        <input type="text" class="form-control mb-3" id="loginName" name="loginName" placeholder="Name">
                    </div>
                    <div class="col-12">
                        <input type="password" class="form-control mb-3" id="loginPassword" name="loginPassword" placeholder="Password">
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">LOGIN</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- page title -->
<section class="page-title-section overlay" data-background="images/backgrounds/page-title.jpg">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <ul class="list-inline custom-breadcrumb mb-2">
                    <li class="list-inline-item"><a class="h2 text-primary font-secondary" href="index.html">主页</a></li>
                    <li class="list-inline-item text-white h3 font-secondary nasted">活动</li>
                </ul>
                <p class="text-lighten mb-0">汇集了各类教育相关的活动信息，包括线上线下的考试通知、证书报名、国内资讯重点等。用户可以通过本页及时了解并参与到丰富多彩的教育活动中，不断提升自己的学术水平和实践能力。

                </p>
            </div>
        </div>
    </div>
</section>
<!-- /page title -->

<!-- courses -->
<section class="section">
    <div class="container">
        <div class="row">
            <!-- event -->
            <div class="col-lg-4 col-sm-6 mb-5" th:each=" activity, t : ${activityList}">

                <span class="id" th:text="${activity.getId()}" style="display: none"></span>
                <span class="count" th:text="${t.size}" style="display: none"></span>

                <div class="card border-0 rounded-0 hover-shadow">
                    <div class="card-img position-relative">
                        <img class="card-img-top rounded-0" th:src="${activity.getPhoto()}" alt="event thumb"
                        style="width: 100%; height: 300px">
                        <div class="card-date"><span th:text="${activity.getDate()}">18</span></div>
                    </div>
                    <div class="card-body">
                        <!-- location -->
                        <p th:text="${activity.getPlace()}"><i class="ti-location-pin text-primary mr-2"></i>Dhanmondi Lake, Dhaka</p>
                        <a href="event-single.html" class="aId">
                            <h4 class="card-title" th:text="${activity.getIntroduction()}">Lorem ipsum dolor amet, consectetur adipisicing.</h4>
                        </a>
                    </div>
                </div>

                <script>
                    var countData = document.getElementsByClassName('count');
                    var idData = document.getElementsByClassName('id');
                    var aIdData = document.getElementsByClassName('aId');
                    for (var i = 0; i < countData[0].textContent; i++) {
                        aIdData[i].setAttribute("href", "/events/single/"+idData[i].textContent);
                    }
                </script>
            </div>
        </div>
    </div>
</section>
<!-- /courses -->

<!-- footer -->
<footer>
    <!-- newsletter -->
    <div class="newsletter">
        <div class="container">
            <div class="row">
                <div class="col-md-9 ml-auto bg-primary py-5 newsletter-block">
                    <h3 class="text-white">Subscribe Now</h3>
                    <form action="#">
                        <div class="input-wrapper">
                            <input type="email" class="form-control border-0" id="newsletter" name="newsletter" placeholder="Enter Your Email...">
                            <button type="submit" value="send" class="btn btn-primary">Join</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- footer content -->
    <div class="footer bg-footer section border-bottom">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-sm-8 mb-5 mb-lg-0">
                    <!-- logo -->
                    <a class="logo-footer" href="index.html"><img class="img-fluid mb-4" src="/static/images/logo.png" alt="logo"></a>
                    <ul class="list-unstyled">
                        <li class="mb-2">23621 15 Mile Rd #C104, Clinton MI, 48035, New York, USA</li>
                        <li class="mb-2">+1 (2) 345 6789</li>
                        <li class="mb-2">+1 (2) 345 6789</li>
                        <li class="mb-2">contact@yourdomain.com</li>
                    </ul>
                </div>
                <!-- company -->
                <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-5 mb-md-0">
                    <h4 class="text-white mb-5">COMPANY</h4>
                    <ul class="list-unstyled">
                        <li class="mb-3"><a class="text-color" href="about.html">About Us</a></li>
                        <li class="mb-3"><a class="text-color" href="teacher.html">Our Teacher</a></li>
                        <li class="mb-3"><a class="text-color" href="contact.html">Contact</a></li>
                        <li class="mb-3"><a class="text-color" href="blog.html">Blog</a></li>
                    </ul>
                </div>
                <!-- links -->
                <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-5 mb-md-0">
                    <h4 class="text-white mb-5">LINKS</h4>
                    <ul class="list-unstyled">
                        <li class="mb-3"><a class="text-color" href="courses.html">Courses</a></li>
                        <li class="mb-3"><a class="text-color" href="events.html">Events</a></li>
                        <li class="mb-3"><a class="text-color" href="notice.html">Notice</a></li>
                        <li class="mb-3"><a class="text-color" href="scholarship.html">Scholarship</a></li>
                    </ul>
                </div>
                <!-- support -->
                <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-5 mb-md-0">
                    <h4 class="text-white mb-5">SUPPORT</h4>
                    <ul class="list-unstyled">
                        <li class="mb-3"><a class="text-color" href="#">Forums</a></li>
                        <li class="mb-3"><a class="text-color" href="#">Documentation</a></li>
                        <li class="mb-3"><a class="text-color" href="#!">Language</a></li>
                        <li class="mb-3"><a class="text-color" href="#!">Release Status</a></li>
                    </ul>
                </div>
                <!-- support -->
                <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-5 mb-md-0">
                    <h4 class="text-white mb-5">RECOMMEND</h4>
                    <ul class="list-unstyled">
                        <li class="mb-3"><a class="text-color" href="#">WordPress</a></li>
                        <li class="mb-3"><a class="text-color" href="#">LearnPress</a></li>
                        <li class="mb-3"><a class="text-color" href="#">WooCommerce</a></li>
                        <li class="mb-3"><a class="text-color" href="#">bbPress</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- copyright -->
    <div class="copyright py-4 bg-footer">
        <div class="container">
            <div class="row">
                <div class="col-sm-7 text-sm-left text-center">
                    <p class="mb-0">Copyright &copy;
                        <script>
                            var CurrentYear = new Date().getFullYear()
                            document.write(CurrentYear)
                        </script>
                        , <a class="text-muted" target="_blank" href="http://www.mobanwang.com/" title="网页模板">网页模板</a>
                    </p>
                </div>
                <div class="col-sm-5 text-sm-right text-center">
                    <ul class="list-inline">
                        <li class="list-inline-item"><a class="d-inline-block p-2" href="#"><i class="ti-facebook text-primary"></i></a></li>
                        <li class="list-inline-item"><a class="d-inline-block p-2" href="#"><i class="ti-twitter-alt text-primary"></i></a></li>
                        <li class="list-inline-item"><a class="d-inline-block p-2" href="#"><i class="ti-github text-primary"></i></a></li>
                        <li class="list-inline-item"><a class="d-inline-block p-2" href="#"><i class="ti-instagram text-primary"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- /footer -->

<!-- jQuery -->
<script src="/static/plugins/jQuery/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="/static/plugins/bootstrap/bootstrap.min.js"></script>
<!-- slick slider -->
<script src="/static/plugins/slick/slick.min.js"></script>
<!-- aos -->
<script src="/static/plugins/aos/aos.js"></script>
<!-- venobox popup -->
<script src="/static/plugins/venobox/venobox.min.js"></script>
<!-- filter -->
<script src="/static/plugins/filterizr/jquery.filterizr.min.js"></script>
<!-- Main Script -->
<script src="/static/js/script.js"></script>

</body>
</html>